<template>
  <div class="chat-box" :class="classObj">
    <chat_tab @clickTab="clickTab" :activeTabName="activeTabName" />

    <chat_user
      v-if="'chat' === activeTabName"
      @clickUserChat="clickUserChat"
      @hideUserChat="hideUserChat"
      v-model:toChatUserId="toChatUserId"
    />
    <user_friend v-else-if="'friend' === activeTabName" @toChat="toChat" />

    <chat_message v-if="showMessage" v-model:activeUser="activeUser" />
    <div class="empty" v-else>聊天是一种生活方式</div>
  </div>
</template>

<script setup lang="ts">
import { useAppStore, useSettingsStore } from "@/store";
import { ChatUserModel } from "@/api/chat/chatUser/model";
import { ChatFriend } from "@/api/chat/friend/model";
import variables from "@/styles/variables.module.scss";

const appStore = useAppStore();

const activeUser = ref<ChatUserModel>({});

const activeTabName = ref("chat");
const clickTab = (tabName: string) => {
  activeTabName.value = tabName;
  showMessage.value = !(!activeUser.value.touserId || tabName === "friend");
};

const showMessage = ref(false);
const clickUserChat = (user: ChatUserModel) => {
  //更新当前选择的用户
  showMessage.value = true;
  activeUser.value = user;
};

//好友界面跳转到聊天
const toChatUserId = ref<string>();
const toChat = (chatUser: ChatUserModel) => {
  activeTabName.value = "chat";
  toChatUserId.value = chatUser.touserId;
  showMessage.value = true;

  activeUser.value = chatUser;
};

/** 隐藏聊天 */
const hideUserChat = () => {
  showMessage.value = false;
  toChatUserId.value = "";
  activeUser.value = {};
};

const classObj = computed(() => ({
  hideSidebar: !appStore.sidebar.opened,
  openSidebar: appStore.sidebar.opened,
}));
</script>

<style scoped lang="scss">
.chat-box {
  --header-height: 50px;
  --chat-tab-width: 50px;
  --left-width: 245px;
  --chat-right-padding-left: 20px;
  --chat-right-padding-right: 20px;
  display: flex;
  flex-direction: row;

  position: fixed;
  top: $navbar-height + $tags-view-height;
  right: 0px;
  bottom: 5px;

  &.hideSidebar {
    left: $sidebar-width-collapsed;
  }
  &.openSidebar {
    left: $sidebar-width;
  }

  //用来没有选择用户时撑开高度
  .empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 40px;
    font-family: cursive;
  }
}
</style>
